<template>
  <div id="main">
    <router-view />
    <transition name="slide-up">
      <LockScreen
        v-if="$store.state.app.lock === '1' && $setting.lockOnOff"
        :real-name="realName"
        :username="username"
        :loading.sync="loading"
        @login="login"
        @changeUser="changeUser"
      />
    </transition>
  </div>
</template>

<script>
import { createNamespacedHelpers } from 'vuex'
import { themeMixin } from '@/utils/common'
const { mapState, mapActions } = createNamespacedHelpers('user')
const { mapState:tagsState, mapActions:tagsActions } = createNamespacedHelpers('tagsView')

export default {
  name: 'App',
  mixins: [themeMixin],
  metaInfo() {
    return {
      title:
        this.$store.state.settings.dynamicTitle &&
        this.$store.state.settings.title,
      titleTemplate: title => {
        return title ? `${title} - ${this.$setting.title}` : this.$setting.title
      }
    }
  },
  data() {
    return {
      loading: false
    }
  },

  computed: {
    ...mapState(['realName', 'username']),
  },
  watch: {
    '$route': {
      handler(to,from) {
        if (to.meta.keepAlive) {
          this.newCache(to.meta.componentName.replace(/\//g, '_'))
        }
        // 像vuex 存储 keepAlive 的 name
      },
      immediate: true
    },
    '$route.path': {
      handler(val) {
        console.log(val)
        if (val === '/login') {
          this.$store.commit('app/SET_LOCK', '0')
        }
      },
      immediate: true
    }
  },
  mounted() {
    // todo 自适应方案 ？fireFox不兼容 .app-main height:100%;position:absolute; .app-view > div height:100%; .sub-viewer height:100%!important
    // const size = (screen.width / 1920).toFixed(2);
    // document.getElementsByTagName("body")[0].style.zoom = size >= 1 ? 1 : size;
  },
  methods: {
    ...mapActions(['Login', 'FedLogOut']),
    ...tagsActions(['newCache', 'clearCache']),

    // 切换用户
    changeUser() {
      this.FedLogOut()
      window.location.reload()
    },
    // 登陆
    login(password) {
      if (!password) return
      this.loading = true
      this.Login({
        username: this.username,
        password: password
      })
        .then(() => {})
        .catch(err => {
          console.log(err)
        })
        .finally(() => {
          this.loading = false
        })
    }
  }
}
</script>

<style lang="scss" scoped>
.slide-up-enter-active {
  animation: slide-up 0.5s;
}

.slide-up-leave-active {
  animation: slide-up 0.5s reverse;
}
@keyframes slide-up {
  0% {
    transform: translateY(-100%);
  }

  100% {
    transform: translateY(0);
  }
}
</style>
